<template>
  <transition name="slide">
    <div class="box">
      <mt-header :title="title" class="mt-header">
            <router-link to="/" slot="left">
              <mt-button class="iconfont icon-jiantou3"></mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
          </mt-header>
      <div class="Con">
        
        <div class="content">
          <div class="picture">
            <img :src="img" alt="">
          </div>
          <div class="dec">
            <!-- 商品价格 -->
            <div class="pro-header">
              <div class="pro-price">
              ￥{{ title }}
              </div>
              <div class="pro-sale">6.6折</div>
            </div>
            <!-- 商品名称 -->
            <div class="pro-content">
              商品名称
            </div>
            <!-- 商品介绍 -->
            <div class="pro-introduce">
              商品介绍
            </div>
            <!-- 官方网站。正品保证部分 -->
            <div class="pro-other">
              <ul class="pro-other-list">
                <li class="iconfont icon-shoucang3">大牌女装双11预售热卖中，预付定金+店铺券</li>
                <li class="iconfont icon-shoucang3">官方网站，正品保证</li>
                <li class="iconfont icon-shoucang3">除偏远地区外均免邮费</li>
              </ul>
            </div>
          
          <!-- 精选好货 -->
          <div class="specialpro">
            <span class="specialpro-title">精选好货</span>
          </div>
          <!-- {{ this.$route.params.id }} -->
          <!-- {{ id }} -->
        </div>
      </div>
    </div>
      <footer class="footer">
        <ul>
          <router-link :to="item.path" tag="li" v-for = "(item, index) of list " :key = "index">
          <span :class="item.icon"></span>
          <p>{{item.name}}</p>
          </router-link>
        </ul>
      </footer>
    </div>
  </transition>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
export default {
  props: ['id'],
  data () {
    return {
      list: [{
        name: '首页',
        icon: 'iconfont icon-shoucang1',
        path: '/home'
      }, {
        name: '分类',
        icon: 'iconfont icon-comment',
        path: '/kind'
      }, {
        name: '购物车',
        icon: 'iconfont icon-gouwucheman',
        path: '/cart'
      }, {
        name: '立即购买',
        path: '/user'
      }],
      title: '',
      img: ''
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
      // console.log()
    }
  },
  mounted () {
    console.log(this.$route)
    const { id } = this.$route.params
    fetch(`/daxun/detail?id=${id}`).then(res => res.json())
      .then(data => {
        console.log(data)
        this.title = data[0].title
        this.img = data[0].images.small
      })
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.Con{
  flex: 1;
  overflow-y: auto
}
.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: auto;
  .picture {
  width: 100%;
  height: 3rem;
  img {
    width: 100%;
    height: 100%
  }
}
  .dec {
    width: 100%;
    padding: 0.08rem;
    height: auto;
    .pro-header {
      width: 100%;
      height: 0.5rem;
      border-bottom: 0.01rem solid #ccc;
      .pro-price {
        width: 40%;
        height: 0.5rem;
        line-height: 0.5rem;
        font-size: 0.18rem;
        color: #000;
        font-weight: 600;
        float:left
      }
      .pro-sale {
        width: 20%;
        height: 0.5rem;
        line-height: 0.5rem;
        float: left;
        font-size: 0.16rem;
        color: #f66
      }
    }
    .pro-content {
      width: 100%;
      height: 0.6rem;
      font-size: 0.16rem;
      line-height: 0.6rem;
    }
    .pro-introduce {
      width: 100%;
      height: 1rem;
      background-color: #eee;
      font-size: 0.16rem
    }
    .pro-other {
      width: 100%;
      height: 1.2rem;
      padding: 0.08rem;
      border-bottom: 0.01rem solid #ccc;
      .pro-other-list {
        width: 100%;
        height: 1.04rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .iconfont {
        font-size: 0.16rem
      }
      }
    }
    .specialpro {
      width: 100%;
      height: 3rem;
      background: #fa2a83;
      .specialpro-title {
        display: block;
        width: 100%;
        height: 0.5rem;
        line-height: 0.5rem;
        font-size: 0.16rem;
        padding-left: 0.08rem;
        border-bottom: 0.01rem solid #ccc
      }
    }
  }

  .introduce {
    width: 100%;
    height: 1.6rem;
    border-bottom: 0.01rem solid #ccc;
    float: left;
    .introduce-title {
      display: flex;
      width: 100%;
      height: 0.3rem;
      line-height: 0.14rem;
      padding: 0.08rem;
      font-size: 0.16rem;
      font-weight: 600;
      border-bottom: 1px solid #fa2a83
    }
  }
  .choice {
    width: 100%;
    height: 3rem;
    background-color: pink
  }
}
.footer {
  ul {
    @include rect(100%, 100%);
    @include flexbox();
    li {
      @include flex();
      @include rect(auto, 100%);
      @include flexbox();
      @include flex-direction(column);
      @include justify-content();
      @include align-items();
      &.router-link-exact-active.router-link-active {
        @include text-color(#f66);
      }
      span {
        @include font-size(0.22rem);
      }
      p {
        @include font-size(0.12rem);
      }
    }
  }
}
</style>
